<template>
  <div class="u-main-content">
    <Row class="u-content__row u_main">
      <Col span="24" class="panel" v-if="userRole=='ROLE_PLATFORM'" style="padding: 10px;padding-left: 20px;">
      <Button type="text" icon="ios-arrow-back" @click="$router.push('/agent')">返回企业分布地图</Button>
      </Col>
      <Col class="panel_top_card" span="24">
      <Row class="w1 h1 panel__line grid">
        <Col span="12" class="panel__line_left">
        <Row class="left_container">
          <h3 class="title">设备统计</h3>
          <a href="javascript:void(0);" class="link" @click="moreDevice" style="z-index: 10;">查看更多</a>
          <Col span="8" style="height: 90%;padding: 0 10px;box-sizing: border-box;">
          <div class="container_card">
            <div class="card-header" style="background-color: #99CCFF;">
              <i class="icon-shebei1"></i>
            </div>
            <div class="card-content">
              <span class="title-span">总设备数</span>
              <p style="font-size: 16px">
                <span style="font-size: 30px;color: #3300CC">{{resData.deviceTotal}}</span>
                <span>台</span>
              </p>
            </div>
          </div>
          </Col>
          <Col span="8" style="height: 90%;padding: 0 10px;box-sizing: border-box;">
          <div class="container_card">
            <div class="card-header" style="background-color: #CCCCFF;">
              <i class="icon-shebei2"></i>
            </div>
            <div class="card-content">
              <span class="title-span">在线设备</span>
              <p style="font-size: 16px">
                <span style="font-size: 30px;color: #3300CC">{{resData.onLineTotal}}</span>
                <span>台</span>
              </p>
            </div>
          </div>
          </Col>
          <Col span="8" style="height: 90%;padding: 0 10px;box-sizing: border-box;">
          <div class="container_card">
            <div class="card-header" style="background-color: #AEAEAE;">
              <i class="icon-lixian"></i>
            </div>
            <div class="card-content">
              <p class="title-span">离线设备</p>
              <p style="font-size: 16px">
                <span style="font-size: 30px;color: #3300CC">{{resData.offLineTotal}}</span>
                <span>台</span>
              </p>
            </div>
          </div>
          </Col>
        </Row>
        </Col>
        <Col span="12" class="panel__line_right">
        <Row class="left_container">
          <h3 class="title">安全用电</h3>
          <a href="javascript:void(0)" class="link" style="z-index: 10;" @click="moreThing">查看更多</a>
          <Col span="8" style="height: 100%;padding: 0 10px;box-sizing: border-box;">
          <div class="container_card">
            <div class="card-header" style="background-color: #00FFCC;">
              <i class="icon-anquan"></i>
            </div>
            <div class="card-content">
              <p class="title-span">安全天数</p>
              <p style="font-size: 16px">
                <span style="font-size: 30px;color: #3300CC">{{resData.safeDay}}</span>
                <span>天</span>
              </p>
            </div>
          </div>
          </Col>
          <Col span="8" style="height: 100%;padding: 0 10px;box-sizing: border-box;">
          <div class="container_card">
            <div class="card-header" style="background-color: #F6A5A5;">
              <i class="icon-gaojing"></i>
            </div>
            <div class="card-content">
              <p class="title-span">报警数</p>
              <p style="font-size: 16px">
                <span style="font-size: 30px;color: #3300CC">{{resData.errorCount}}</span>
                <span>次</span>
              </p>
            </div>
          </div>
          </Col>
          <Col span="8" style="height: 100%;padding: 0 10px;box-sizing: border-box;">
          <div class="container_card">
            <div class="card-header" style="background-color:#D7D7D7; ">
              <i class="icon-guzhang"></i>
            </div>
            <div class="card-content">
              <p class="title-span">故障数</p>
              <p style="font-size: 16px">
                <span style="font-size: 30px;color: #3300CC">{{resData.faultCount}}</span>
                <span>次</span>
              </p>
            </div>
          </div>
          </Col>
        </Row>
        </Col>
      </Row>
      </Col>
      <Col class="panel_middle_card" span="24">
      <Row class="w1 h1 panel__line grid">
        <Col span="12" class="panel__line_left">
        <div class="content">
          <h3 class="title">近期异常事件通知记录</h3>
          <div class="table">
            <Table :columns="userRole == 'ROLE_DEMO' ? columnsOfDemo : columns" :data="tableData" border size="small"></Table>
          </div>
        </div>
        </Col>
        <Col span="12" class="panel__line_right">
        <div class="content">
          <h3 class="title">电流最大值分布图</h3>
          <div class="chart">
            <div id="map"></div>
          </div>
        </div>
        </Col>
      </Row>
      </Col>
      <Col class="panel_bottom_card" span="24">
      <Row class="w1 h1 panel__line grid">
        <Col span="12" class="panel__line_left">
        <div class="content">
          <h3 class="title">实时功率TOP3</h3>
          <div class="chart">
            <div id="map2"></div>
          </div>
        </div>
        </Col>
        <Col span="12" class="panel__line_right">
        <div class="content">
          <h3 class="title">电量概况</h3>
          <div class="card">
            <div class="card-container cf">
              <div class="left fl">
                <div class="w1" style="height: 49%;">
                  <div class="card-panel fl">
                    <div class="w1 h1 content-" style="background-color: #4CAF50;">
                      <div class="title-">今日电量</div>
                      <p style="font-size: 16px;margin-top: 10px;">
                        <span style="font-size: 28px;color: #3300CC">{{resData.todayUse}}</span>
                        <span>kWh</span>
                      </p>
                    </div>
                  </div>
                  <div class="card-panel fr">
                    <div class="w1 h1 content-" style="background-color: #9C27B0;">
                      <div class="title-">本月电量</div>
                      <p style="font-size: 16px;margin-top: 10px;">
                        <span style="font-size: 28px;color: #4CAF50">{{resData.currMonthUse}}</span>
                        <span>kWh</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="w1" style="height: 49%;">
                  <div class="card-panel fl">
                    <div class="w1 h1 content-" style="background-color: #4CAF50;">
                      <div class="title-">昨日电量</div>
                      <p style="font-size: 16px;margin-top: 10px;">
                        <span style="font-size: 28px;color: #3300CC">{{resData.yestdayUse}}</span>
                        <span>kWh</span>
                      </p>
                    </div>
                  </div>
                  <div class="card-panel fr">
                    <div class="w1 h1 content-" style="background-color: #9C27B0;">
                      <div class="title-">上月同期用电量</div>
                      <p style="font-size: 16px;margin-top: 10px;">
                        <span style="font-size: 28px;color: #4CAF50">{{resData.lastMonthUse}}</span>
                        <span>kWh</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right fr">
                <div class="w1 h1 card-1">
                  <div class="title-1">
                    本月
                    <br> 电量同比
                    <br>
                    <br>
                    <span class="on-line">
                      <Icon type="arrow-up-a"></Icon>{{resData.energyUseRate}}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        </Col>
      </Row>
      </Col>
    </Row>
  </div>
</template>
<script>
import PermissionMixin from "../PermissionMixin"

import { getInfoOfIndex, getIndexException, getIndexDlInfo } from "@/api"

export default {
  mixins: [PermissionMixin],
  mounted() {
    this._getIndexInfo()
  },
  methods: {
    curStr(str) {
      let s = str
      if (str.length <= 15) return s
      return s.substr(0, 15) + "..."
    },

    // 获取首页信息
    _getIndexInfo() {
      const vm = this
      const companyId = vm.companyId
      const params = { companyId }
      getInfoOfIndex(params).then(res => {
        if (res.code == 200 && !!res.data) {
          vm.resData = res.data
          vm.pieChart(res.data.top)
        }
      })

      // 异常事件列表
      getIndexException(params).then(res => {
        if (res.code == 200) {
          if (!!res.data && res.data.length > 0) {
            if (res.data.length > 5) {
              vm.tableData.length = 5
            }
            vm.tableData = res.data || []
          } else {
            vm.tableData = []
          }
        }
      })

      // 电流分布图
      getIndexDlInfo(params).then(res => {
        if (res.code == 200 && !!res.data) {
          vm.leidaChart(res.data)
        }
      })
    },

    // 实时功率 top3
    pieChart(option) {
      let vm = this
      if (option.length == 0) {
        vm.$nextTick(() => {
          vm.chartPie = vm.echarts.init(document.getElementById("map2"))
          vm.chartPie.clear()
          vm.chartPie.setOption({
            title: {
              text: "暂无数据",
              textStyle: {
                fontWeight: "bold",
                fontSize: 28
              },
              left: "center",
              top: "center"
            }
          })
          vm.chartPie.hideLoading()
        })
        return false
      }
      vm.$nextTick(() => {
        vm.chartPie = vm.echarts.init(document.getElementById("map2"))
        vm.chartPie.clear()
        vm.chartPie.showLoading({
          text: "",
          color: "red"
        })

        let newArr = []
        let titleArr = []
        for (let i = 0; i < option.length; i++) {
          let obj = {}
          let str = ""
          for (let key in option[i]) {
            obj["name"] = option[i].des
            str = option[i].des
            obj[key] = option[i][key]
          }
          newArr.push(obj)
          titleArr.push(str)
        }
        let options = {
          tooltip: {
            trigger: "item",
            formatter: "{b}<br/> 总有功功率: {c}kW"
          },

          legend: {
            bottom: "0",
            orient: "vertical",
            right: "0",
            data: titleArr
          },
          series: [
            {
              name: "实时功率TOP3",
              type: "pie",
              center: ["45%", "center"],
              radius: ["40%", "60%"],
              avoidLabelOverlap: true,
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: newArr
            }
          ]
        }

        vm.chartPie.setOption(options)
        vm.chartPie.hideLoading()
      })
    },

    leidaChart(option) {
      const vm = this
      if (option[12].length == 0) {
        vm.$nextTick(() => {
          vm.chartLeida = vm.echarts.init(document.getElementById("map"))
          vm.chartLeida.clear()
          vm.chartLeida.showLoading()
          vm.chartLeida.setOption({
            title: {
              text: "暂无数据",
              textStyle: {
                fontWeight: "bold",
                fontSize: 28
              },
              left: "center",
              top: "center"
            }
          })
          vm.chartLeida.hideLoading()
        })
        return false
      }

      let length = option[12].length
      let optionKeys = Object.keys(option)
      let seriesArr = []
      for (let i = 0; i < length; i++) {
        seriesArr.push({
          value: optionKeys.map(t => {
            return option[t][i].value
          }),
          name: []
        })
      }
      for (let i = 0; i < length; i++) {
        seriesArr[i].name = option[12][i].deviceName
      }

      let TwoDimensionalArray = seriesArr.map(t => {
        return t.value.map(s => {
          return s
        })
      })

      let newSeriesArr = []
      seriesArr.forEach((t, i) => {
        newSeriesArr.push({
          name: t.name,
          type: "radar",
          itemStyle: {
            normal: {
              areaStyle: {
                type: "default"
              }
            }
          },
          data: [seriesArr[i]]
        })
      })

      let Max = Math.max.apply(
        null,
        TwoDimensionalArray.map(Function.apply.bind(Math.max, null))
      )
      let options = {
        tooltip: {
          formatter: function(params) {}
        },
        legend: {
          orient: "vertical",
          left: 0,
          top: 20,
          bottom: 20
        },
        radar: {
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          radius: 82,
          center: ["70%", "center"],
          indicator: [
            {
              name: "A相电流",
              max: Max
            },
            {
              name: "B相电流",
              max: Max
            },
            {
              name: "C相电流",
              max: Max
            },
            {
              name: "零线电流",
              max: Max
            }
          ]
        },
        series: newSeriesArr
      }
      vm.$nextTick(() => {
        vm.chartLeida = vm.echarts.init(document.getElementById("map"))
        vm.chartLeida.on("mouseover", para => {})
        vm.chartLeida.clear()
        vm.chartLeida.showLoading()
        vm.chartLeida.setOption(options)
        vm.chartLeida.hideLoading()
      })
    },

    // 查看更多设备
    moreDevice() {
      let vm = this
      vm.$router.push({
        name: "userDevice"
      })
    },

    // 查看更多报警事件
    moreThing() {
      let vm = this
      vm.$router.push({
        name: "userErrorthing"
      })
    }
  },

  data() {
    return {
      toggleMenu: false,
      resData: {},
      // 饼图实例
      chartPie: {},

      // 雷达图实例
      chartLeida: {},
      columnsOfDemo: [
        {
          title: "设备名称",
          key: "deviceAlias",
          align: "center"
        },
        {
          title: "事件详情",
          key: "exceptionContent",
          align: "center"
        },
        {
          title: "通知记录",
          key: "noticeContent",
          align: "center"
        },
        {
          title: "报警时间",
          align: "center",
          key: "exceptionDate"
        }
      ],
      columns: [
        {
          title: "设备名称",
          key: "deviceName",
          align: "center"
        },
        {
          title: "事件详情",
          key: "exceptionContent",
          align: "center"
        },
        {
          title: "通知记录",
          align: "center",
          render: (h, params) => {
            let str = params.row.noticeContent
            if (str.length >= 15) {
              return h(
                "Tooltip",
                {
                  props: {
                    content: str,
                    theme: "light",
                    "max-width": "200"
                  }
                },
                [h("span", this.curStr(str))]
              )
            }
            return h("span", str)
          }
        },
        {
          title: "报警时间",
          align: "center",
          key: "exceptionDate"
        }
      ],
      tableData: []
    }
  }
}
</script>
